<template>
  <div class=" p-5">
    <div class="rounded-lg p-3 mb-5 border border-solid">
      <el-descriptions title="系统信息" :column="3" border >
        <template #extra> <el-button type="primary" @click="get_sys_info">刷新</el-button> </template>
        <el-descriptions-item> <template #label> <div class="cell-item"> 系统 </div> </template> {{ sys_info.name }} </el-descriptions-item>
        <el-descriptions-item> <template #label> <div class="cell-item"> 版本 </div> </template> {{ sys_info.version }} </el-descriptions-item>
        <el-descriptions-item> <template #label> <div class="cell-item"> Host Name </div> </template> {{ sys_info.host }} </el-descriptions-item>
        <el-descriptions-item> <template #label> <div class="cell-item"> 内存 </div> </template> {{ sys_info.memory }}s </el-descriptions-item>
        <el-descriptions-item> <template #label> <div class="cell-item"> 网卡 </div> </template>
          <el-popover placement="right" :width="460" trigger="click">
            <template #reference>
              <el-button >详情</el-button>
            </template>
            <el-table :data="sys_info.networks">
              <el-table-column width="50" property="id" label="id" />
              <el-table-column width="240" property="name" label="name" />
              <el-table-column width="150" property="mac" label="mac" />
            </el-table>
          </el-popover>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="rounded-lg p-3 mb-5 border border-solid">
      <el-descriptions title="软件信息" :column="3" border>
         <template #extra> <el-button type="primary">刷新</el-button> </template>
        <el-descriptions-item> <template #label> <div class="cell-item"> 内核 </div> </template> OS_Mehlub_Trans </el-descriptions-item>
        <el-descriptions-item> <template #label> <div class="cell-item"> 版本 </div> </template> 1.0.0 </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="rounded-lg p-3 mb-5 border border-solid">
      <el-descriptions title="授权信息" :column="3" border> <template #extra>  <el-button type="primary">刷新</el-button> </template>
        <el-descriptions-item> <template #label> <div class="cell-item"> 内核 </div> </template> OS_Auth_Base </el-descriptions-item>
        <el-descriptions-item> <template #label> <div class="cell-item"> 版本 </div> </template> 1.0.0 </el-descriptions-item>
        <el-descriptions-item> <template #label> <div class="cell-item"> 时长 </div> </template> 永久 </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>


  <div class="text-sm fixed bottom-5 w-full text-center text-gray-500 mt-10 select-none">Copyright © 2013 - 2024 泉州日标科技有限公司</div>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { invoke } from '@tauri-apps/api/tauri'

interface SysInfo {
    name: string;
    version: string;
    host: string;
    memory: string;
    networks: {id:number,name:string,mac:string}[];
}

const sys_info = ref<SysInfo>(
  {name:"Windows",version:"11 (22631)",host:"DESKTOP-R2DNQHO",memory:"",networks:[]}
)

async function get_sys_info () {
  let result = await invoke("get_sys_info_cmd");
  sys_info.value = result as SysInfo;

  return result;
}

onMounted(() => {
  get_sys_info();
});


</script>

<style scoped>

</style>
